<template>
    <cover-view>
        <cover-view class="mark"></cover-view>
        <cover-view class="content">
            <cover-view class="buying-top">
                <cover-view class="buying-info">
                    <cover-view class="buying-info-img"></cover-view>
                    <cover-view style="width:70%;margin-left:37rpx">
                        <cover-view class="buying-info-price">￥20.0</cover-view>
                        <cover-view class="buying-info-name">
                            <cover-view>桄榔粉</cover-view>
                            <cover-view>/袋</cover-view>
                        </cover-view>
                    </cover-view>
                </cover-view>
                <cover-view class="buying-num">
                    <cover-view style="color:#999999;font-size:28rpx;margin-left:13rpx;">选择数量</cover-view>
                    <cover-view class="choose-num">
                        <cover-view class="choose-num-reduce">
                            -
                        </cover-view>
                        <cover-view class="choose-num-total">1</cover-view>
                        <cover-view class="choose-num-add">
                            +
                        </cover-view>
                    </cover-view>
                </cover-view>
            </cover-view>
            <cover-view class="buying-bottom">
                <cover-view class="buying-bottom-button">立即购买</cover-view>
            </cover-view>
        </cover-view>
    </cover-view>
</template>

<script>
export default {
    
}
</script>

<style>
    .mark {
        position: fixed;
        top: 0rpx;
        bottom: 0rpx;
        left: 0rpx;
        right: 0rpx;
        background:rgba(0,0,0,1);
        opacity:0.3;
    }
    .content {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        height: 453rpx;
        background: #ffffff;
        opacity: 1
    }
    .buying-top {
        /* width: 100%; */
        height: 261rpx;
        padding: 10rpx 44rpx 43rpx 38rpx;
    }
    .buying-info {
        display: flex;
        justify-content: left;
    }
    .buying-info-img {
        width: 175rpx;
        height: 167rpx;
        border: 1rpx solid #ccc;
    }
    .buying-info-price {
        color: #FF1E1E;
        font-size: 36rpx;
        font-weight: 500;
        margin-top: 48rpx;
    }
    .buying-info-name {
        color: #333333;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        margin-top: 30rpx;
    }
    .buying-num {
        display: flex;
        justify-content: space-between;
        margin-top: 50rpx;
    }
    .choose-num {
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
    }
    .choose-num-reduce,
    .choose-num-add {
        width: 43rpx;
        height: 43rpx;
        border-radius: 50%;
        background:#F4F4F4;
        text-align: center;
        line-height: 38rpx;
        color: #C8C8C8;
        font-size: 40rpx;
    }
    .choose-num-total {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        padding: 0 30rpx;
    }
    .buying-bottom {
        height: 140rpx;
        box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.1);
    }
    .buying-bottom-button {
        width: 473rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx;
        margin: 28rpx auto;
        font-size: 30rpx;
        font-weight: bold;
        color:rgba(255,255,255,1);
        text-align: center;
        line-height: 84rpx;
    }
</style>